<template>
	<view class="content">
		<view class="top">
			<view class="shadow">
			</view>
			<view class="top-main">
				<view style="width: 92rpx;height: 64rpx;"></view>
				<view>注册</view>
				<view>客服</view>
			</view>
		</view>
		<view class="mid">
			<block v-for="(item,index) in midList" :key="index">
				<view @click="midTap(index)" style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 70rpx;width: 33%;">
					<text :class="selected==index?'tab-selected':'tab-unselect'">{{item}}</text>
					<view :class="selected==index?'tab-end-selected':'tab-end-unselect'"></view>
				</view>
			</block>
		</view>

		<view class="reg">
			<!-- 账号注册 -->
			<view v-if="selected==0">
				<text class="reg-title">设置用户名(英文加数字)</text>
				<view class="reg-main">
					<view class="reg-main-left">
						<image class="reg-main-left-img" src="../../static/User.png"></image>
						<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入用户名" />
					</view>
				</view>
			</view>

			<!-- 电话号码 -->
			
			<view v-if="selected==1">
				<view class="reg-main">
					<view class="reg-main-left">
						<image class="reg-main-left-img" src="../../static/US.png"></image>
						<text style="color: #FFFFFFCC;font-size: 32rpx;margin-left: 8rpx;">+1</text>
						<image style="width: 38rpx;height: 38rpx;margin-left: 8rpx;" src="../../static/Select.png"></image>
						<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入手机号码" />
					</view>
				</view>
				<view class="reg-main">
					<view class="reg-main-left">
						<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入验证码" />
					</view>
					<text style="font-size: 28rpx;color: #FFC549;padding: 20rpx;">发送验证码</text>
				</view>
			</view>
			
			<!-- 电子邮箱 -->
			<view v-if="selected==2">
				<view class="reg-main">
					<view class="reg-main-left">
						<image class="reg-main-left-img" src="../../static/Mail.png"></image>
						<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入邮箱" />
					</view>
				</view>
				<view class="reg-main">
					<view class="reg-main-left">
						<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入验证码" />
					</view>
					<text style="font-size: 28rpx;color: #FFC549;padding: 20rpx;">发送验证码</text>
				</view>
			</view>
			
			<text class="reg-title">登录密码(至少6为字母，包括数字字符)</text>
			<view class="reg-main">
				<view class="reg-main-left">
					<image class="reg-main-left-img" src="../../static/Lock.png"></image>
					<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请设定密码" />
				</view>
				<image class="reg-main-right-img" src="../../static/Eye.png"></image>
			</view>
			<text class="reg-title">请确认密码</text>
			<view class="reg-main">
				<view class="reg-main-left">
					<image class="reg-main-left-img" src="../../static/Lock.png"></image>
					<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请确认密码" />
				</view>
				<image class="reg-main-right-img" src="../../static/EyeOff.png"></image>
			</view>
			<text class="reg-title">推荐码</text>
			<view class="reg-main">
				<view class="reg-main-left">
					<image class="reg-main-left-img" src="../../static/Barcode.png"></image>
					<input class="reg-main-left-input" placeholder-class="inputHolder" placeholder="请输入推荐码" />
				</view>
				<image class="reg-main-right-img" src="../../static/Eye.png"></image>
			</view>
		</view>
		
		
		
		<!-- end -->
		<view class="end">
			<view class="end-first">
				<view style="width: 32rpx;height: 32rpx;border-radius: 8rpx;background-color: #FFC549;margin-right: 10rpx;line-height: 32rpx;text-align: center;font-size: 24rpx;">✓</view>
				<text style="color: white;">注册即表示同意</text>
				<text style="color: #FFC549;">服务协议</text>
				<text style="color: white;">、</text>
				<text style="color: #FFC549;">隐私政策,</text>
				<text style="color: white;">反洗钱通道</text>
			</view>
			<view class="end-second">
				<text>注册</text>
			</view>
			<view class="end-third">
				<text style="color: white;">已有账号?</text>
				<text style="color: white;text-decoration: underline;">立即下载APP</text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				midList:['账号注册','电话号码','电子邮箱'],
				selected:0
			}
		},
		onLoad() {

		},
		methods: {
			midTap(e){
				this.selected=e;
			}
		}
	}
</script>

<style>
	page{
		background: var(--color-fill-bg-light, #0C0C0C);
	}
	.top-main>view:nth-child(3){
		color: #FFC549;width: 92rpx;height: 64rpx;text-align: center;line-height: 64rpx;background: var(--color-fill-bg-grey, #1D1C21);
		border-radius: 32rpx;font-size: 30rpx;
	}
	.top-main>view:nth-child(2){
		color: white;font-size: 36rpx;
	}
	.top-main{
		width: 100%;;display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 88rpx;height: 88rpx;
	}
	.shadow{
		width: 540rpx;height: 516rpx;background: radial-gradient(82.96% 86.82% at 32.96% 0%, #FFC549 0%, rgba(153, 118, 44, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
		position: absolute;top: -258rpx;left: -270rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.top{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mid{
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		font-size: 32rpx;
	}
	.tab-selected{
		color: #FFC549;
	}
	.tab-unselect{
		color: #FFFFFF80;
	}
	.tab-end-selected{
		background-color: #FFC549;width: 32rpx;height: 4rpx;
	}
	.tab-end-unselect{
		background: none;
	}
	.reg{
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.inputHolder{
		font-size: 28rpx;
		color: #FFFFFFCC;
	}
	.reg-title{
		font-size: 28rpx;color: #FFFFFFCC;margin-top: 25rpx;
	}
	.reg-main{
		width: 100%;border: 1rpx solid var(--color-fill-bg-input, #FFFFFF1A);background: #FFFFFF1A;margin-top: 20rpx;
		display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 112rpx;border-radius: 24rpx;
	}
	.reg-main-left{
		display: flex;flex-direction: row;align-items: center;
	}
	.reg-main-left-img{
		width: 40rpx;height: 40rpx;margin-left: 20rpx;
	}
	.reg-main-left-input{
		color: white;font-size: 28rpx;width: 65%;margin-left: 20rpx;
	}
	.reg-main-right-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.end{
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90%;
		/* height: 20rpx; */
	}
	.end-first{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 35rpx;
		font-size: 28rpx;
	}
	.end-second{
		width: 100%;
		height: 104rpx;
		background-color: #FFC549;
		border-radius: 24rpx;
		line-height: 104rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		color: #000;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.end-third{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		font-size: 28rpx;
	}
</style>
